<script lang="ts">
import { defineComponent, ref, watch, computed, nextTick, reactive } from "vue";
import Clipboard from "clipboard";
import { showToast, showDialog, showConfirmDialog } from "vant";
import { useI18n } from "vue-i18n";
import { UserModule } from "@/store/modules/user";
import { formatAddress, toStringMatch } from "@/utils/format";
import {
    UserInfo,
    Count,
    GetNFTsInfo,
    Id2Address,
    GetNodeUSDT,
    GetNodeTRX,
    GetRewardUSDT,
    GetRewardTRX,
    GetReleaseReward,
    PayUSDT,
    PayTRX,
} from "@/contract/Node";
import { BalanceOf, Approve, Allowance } from "@/contract/Erc20";
import { TokenOfOwner, SafeTransferFrom } from "@/contract/NFT";
import { FormatDate } from "@/utils/formatDate";
import { getNodeCodeById, getNodeIdByCode } from "@/api";
import { useRouter } from "vue-router";

export default defineComponent({
    setup() {
        const { t } = useI18n();
        const router = useRouter();
        const active = ref(0);
        const active2 = ref(0);
        const amount = ref(1);
        const isCode = ref(false);
        const code = ref(router.currentRoute.value.query.referrer || "");
        const address2 = ref();
        const open = ref(false);
        const nftId = ref(0);
        const loading1 = ref(false);
        const loading2 = ref(false);
        const loading3 = ref(false);
        const loading4 = ref(false);
        const pageLoading = ref(true);
        const slippage = ref([5, 10, 20, 30, 40]);
        const slippageIndex = ref(5);
        const userInfo = ref({});
        const NodeCode = ref();
        const nodeUSDT = ref(0);
        const nodeTRX = ref(0);
        const USDT = ref(0);
        const TRX = ref(0);
        const count = ref(0);
        const setat = reactive({
            pageNum: 0,
            pageSize: 10,
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list: any = ref([]);
        const onRefresh = () => {
            setat.pageNum = 0;
            finished.value = false;
            loading.value = true;
            refreshing.value = true;
            onLoad();
        };
        const onLoad = async () => {
            const res = await TokenOfOwner(
                UserModule.userAddr,
                setat.pageNum,
                setat.pageSize
            );
            if (refreshing.value) {
                list.value = [];
                refreshing.value = false;
            }
            const infos = await GetNFTsInfo(res[0]);
            console.log(infos);
            for (let index = 0; index < infos[0].length; index++) {
                list.value.push({
                    id: res[0][index],
                    createdAt: infos.createdAts[index],
                    token1: infos.token1s[index],
                    token2: infos.token2s[index],
                    withdrawn: infos.withdrawns[index],
                    loading: false,
                });
            }
            loading.value = false;
            setat.pageNum++;
            console.log(res.total.toNumber(), list.value.length);
            if (list.value.length >= res.total.toNumber()) {
                finished.value = true;
            }
        };
        const onSubmit = async () => {
            loading1.value = true;
            try {
                var referrer = UserModule.userAddr;
                if (isCode.value) {
                    if (!code.value) {
                        showToast({
                            message: "请输入邀请码",
                            icon: "clear",
                            className: "_showToast2",
                            position: "top",
                        });
                        loading1.value = false;
                        return;
                    }
                    const resCode = await getNodeIdByCode({
                        code: code.value,
                    });
                    if (resCode.data.code !== 20) {
                        showToast({
                            message: "邀请码有误",
                            icon: "clear",
                            className: "_showToast2",
                            position: "top",
                        });
                        loading1.value = false;
                        return;
                    }
                    const resReferrer = await Id2Address(
                        resCode.data.data.NodeId
                    );
                    referrer = tronWeb.address.fromHex(resReferrer);
                }
                console.log(referrer, "aAASSSS");

                if (active.value == 0) {
                    if (USDT.value.lt(_nodeUSDT.value)) {
                        showToast({
                            message: t("layout.InsufficientBalance"),
                            icon: "clear",
                            className: "_showToast2",
                            position: "top",
                        });
                        loading1.value = false;
                        return;
                    }
                    const allowance = await Allowance(UserModule.userAddr);
                    if (allowance.remaining.lte(_nodeUSDT.value)) {
                        if (
                            allowance.remaining.toString() !==
                            _nodeUSDT.value.toString()
                        )
                            await Approve(UserModule.userAddr, _nodeUSDT.value);
                    }
                    await PayUSDT(referrer, amount.value);
                } else {
                    if (tronWeb.BigNumber(TRX.value).lt(_nodeTRX.value)) {
                        showToast({
                            message: t("layout.InsufficientBalance"),
                            icon: "clear",
                            className: "_showToast2",
                            position: "top",
                        });
                        loading1.value = false;
                        return;
                    }
                    await PayTRX(referrer, amount.value, _nodeTRX.value);
                }
                setTimeout(() => {
                    loadData();
                    onRefresh();
                }, 500);
                showToast({
                    message: t("layout.SuccessfulTransaction"),
                    icon: "checked",
                    className: "_showToast",
                    position: "top",
                });
            } catch (error) {
                console.log(error);
            }
            loading1.value = false;
        };
        const getRewardUSDT = async () => {
            loading2.value = true;
            try {
                await GetRewardUSDT();
                showToast({
                    message: t("layout.ReceiveSuccessful"),
                    icon: "checked",
                    className: "_showToast",
                    position: "top",
                });
                setTimeout(() => {
                    loadData();
                }, 500);
            } catch (error) {}
            loading2.value = false;
        };
        const getRewardTRX = async () => {
            loading3.value = true;
            try {
                await GetRewardTRX();
                showToast({
                    message: t("layout.ReceiveSuccessful"),
                    icon: "checked",
                    className: "_showToast",
                    position: "top",
                });
                setTimeout(() => {
                    loadData();
                }, 500);
            } catch (error) {}
            loading3.value = false;
        };
        const getReleaseReward = async (item, index) => {
            item.loading = true;
            try {
                await GetReleaseReward(item.id);
            } catch (error) {}
            showToast({
                message: t("layout.ReceiveSuccessful"),
                icon: "checked",
                className: "_showToast",
                position: "top",
            });
            nextTick(() => {
                loadData();
                GetNFTsInfo([item.id]).then((res) => {
                    list.value[index] = {
                        id: item.id,
                        createdAt: res[0][0],
                        token1: res[1][0],
                        token2: res[2][0],
                        withdrawn: res[3][0],
                        loading: false,
                    };
                });
            });
            item.loading = false;
        };
        const safeTransferFrom = async () => {
            loading4.value = true;
            try {
                await SafeTransferFrom(
                    UserModule.userAddr,
                    address2.value,
                    nftId.value
                );
                setTimeout(() => {
                    loadData();
                    onRefresh();
                }, 500);
                open.value = false;
            } catch (error) {
                console.log(error);
            }
            loading4.value = false;
        };
        const showOpen = (id) => {
            open.value = true;
            nftId.value = id;
        };
        const copy = async (id: string) => {
            const clipboard = new Clipboard(id);
            clipboard.on("success", () => {
                showToast({
                    message: t("layout.copySuccessfully"),
                    icon: "checked",
                    className: "_showToast",
                });
                clipboard.destroy();
            });
            clipboard.on("error", () => {
                showToast(t("layout.fail"));
                clipboard.destroy();
            });
        };
        const loadData = async () => {
            try {
                UserInfo(UserModule.userAddr).then((res) => {
                    userInfo.value = res;
                    getNodeCodeById({ id: userInfo.value[0].toString() }).then(
                        (res) => {
                            if (res.data.code == 20) {
                                NodeCode.value = res.data.data.NodeCode;
                                isCode.value = false;
                            } else {
                                isCode.value = true;
                            }
                        }
                    );
                });
                BalanceOf(UserModule.userAddr).then((res) => {
                    USDT.value = res;
                });
                tronWeb.trx.getBalance(UserModule.userAddr).then((res) => {
                    TRX.value = res;
                });
                Count().then((res) => {
                    count.value = res;
                });
                await getPrice(amount.value);
                pageLoading.value = false;
            } catch (error) {}
        };
        const shareAddress = computed(() => {
            if (NodeCode.value) {
                return (
                    window.location.origin +
                    "/#/node?referrer=" +
                    NodeCode.value
                );
            }
            return "";
        });
        const fromSun = computed(() => {
            return (data) => {
                return tronWeb.fromSun(data);
            };
        });
        const toSun = computed(() => {
            return (data) => {
                return tronWeb.toSun(data);
            };
        });
        const getPrice = async (newValue) => {
            await GetNodeUSDT(newValue).then((res) => {
                nodeUSDT.value = res;
            });
            await GetNodeTRX(newValue).then((res) => {
                nodeTRX.value = res;
                console.log(
                    fromSun.value(nodeTRX.value).toString(),
                    ",,,,,,,,,,,,,,,,,,,,"
                );
            });
        };
        const _nodeTRX = computed(() => {
            if (nodeTRX.value) {
                return nodeTRX.value
                    .mul(slippageIndex.value)
                    .div(100)
                    .add(nodeTRX.value)
                    .mul(amount.value || 1);
            }
            return 0;
        });
        const _nodeUSDT = computed(() => {
            if (nodeTRX.value) {
                return nodeUSDT.value.mul(amount.value || 1);
            }
            return 0;
        });
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                    onRefresh();
                }
            },
            { immediate: true }
        );
        watch(amount, (newValue, oldValue) => {
            if (newValue) {
                // getPrice(newValue);
            }
        });

        return {
            active,
            active2,
            open,
            amount,
            isCode,
            code,
            address2,
            loading1,
            loading2,
            loading3,
            loading4,
            pageLoading,
            slippage,
            slippageIndex,
            UserModule,
            count,
            USDT,
            TRX,
            userInfo,
            NodeCode,
            nodeUSDT,
            _nodeUSDT,
            nodeTRX,
            fromSun,
            toSun,
            _nodeTRX,
            list,
            setat,
            refreshing,
            finished,
            onRefresh,
            onLoad,
            loading,
            toStringMatch,
            formatAddress,
            onSubmit,
            getRewardUSDT,
            getRewardTRX,
            showOpen,
            getReleaseReward,
            safeTransferFrom,
            copy,
            FormatDate,
            shareAddress,
        };
    },
});
</script>

<template>
    <div class="main2">
        <div class="page">
            <van-form @submit="onSubmit">
                <div class="rowNode">
                    <div class="num">No. {{Math.floor(count/100)*100}} - {{Math.ceil(count/100)*100 == Math.floor(count/100)*100 ?Math.floor(count/100)*100+99:Math.ceil(count/100)*100 -1}}</div>
                    <div class="label">在售中</div>
                </div>
                <div class="rowRemaining">
                    <div class="cell">
                        <div>
                            <div class="label">已售节点</div>
                            <div class="value">{{count}}</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div>
                            <div class="label">当前剩余</div>
                            <div class="value">{{Math.ceil(count/100)*100 -count == 0?99:Math.ceil(count/100)*100 -count}}</div>
                        </div>
                    </div>
                </div>
                <div class="price">
                    <div>
                        <div class="label">当前价格</div>
                        <div class="value">{{fromSun(nodeUSDT)}} USD</div>
                    </div>
                </div>
                <div class="rowinput">
                    <div class="name">数量</div>
                    <van-stepper v-model="amount" :max="Math.ceil(count/100)*100 -count == 0?99:Math.ceil(count/100)*100 -count" />
                </div>
                <div class="rowinput" v-if="isCode">
                    <div class="name">邀请码</div>
                    <van-field v-model="code" placeholder="请输入邀请码" />
                </div>
                <van-tabs v-model:active="active" class="tabsPay">
                    <van-tab title="USDT">
                        <div class="tabsBlock">
                            <div class="row">
                                <div class="cell">
                                    <div class="label">需支付</div>
                                    <div class="value">{{toStringMatch(fromSun(_nodeUSDT))}}</div>
                                </div>
                                <div class="cell">
                                    <div class="label">余额</div>
                                    <div class="value">{{toStringMatch(fromSun(USDT))}}</div>
                                </div>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="TRX">
                        <div class="tabsBlock">
                            <div class="row">
                                <div class="cell">
                                    <div class="label">需支付</div>
                                    <div class="value"><span v-if="nodeTRX.mul">{{toStringMatch(fromSun(nodeTRX.mul(amount)))}}</span></div>
                                </div>
                                <div class="cell">
                                    <div class="label">余额</div>
                                    <div class="value">{{toStringMatch(fromSun(TRX))}}</div>
                                </div>
                            </div>
                            <div class="slippage">
                                <div class="name">
                                    <div>
                                        滑点
                                        <van-popover theme="dark" placement="bottom-start" :offset="[0, 10]">
                                            <template #reference> <van-icon name="question-o" /></template>
                                            <div class="popovertext">实际交易的TRX数量将取sunswap的即时价格,多余的TRX将退回</div>
                                        </van-popover>

                                    </div>
                                    <div>

                                        需<span>{{toStringMatch(fromSun(_nodeTRX)) }}</span>
                                    </div>
                                </div>
                                <ul>
                                    <li v-for="(item,index) in slippage" :class="{cur:item == slippageIndex}" @click="slippageIndex = item" :key="index">{{ item }} %</li>
                                </ul>

                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
                <van-button round block type="primary" :loading="loading1" :disabled="pageLoading" native-type="submit">
                    购买
                </van-button>
            </van-form>
            <div class="award">
                <div class="title">邀请奖励</div>
                <div class="rowAward">
                    <div class="cell">
                        <div class="label"><img src="@/assets/image/USDT.svg" alt="" srcset="">{{fromSun(userInfo[4]) || 0}}</div>
                        <van-button round block type="primary" @click="getRewardUSDT" :loading="loading2" :disabled="!Number(fromSun(userInfo[4]))">
                            领取
                        </van-button>
                    </div>
                    <div class="cell">
                        <div class="label"><img src="@/assets/image/_img35.png" alt="" srcset="">{{fromSun(userInfo[5]) || 0}}</div>
                        <van-button round block type="primary" @click="getRewardTRX" :loading="loading3" :disabled="!Number(fromSun(userInfo[5]))">
                            领取
                        </van-button>
                    </div>
                </div>
                <div class="rowInvite">
                    <div class="userAddr userAddr1" @click="copy('.userAddr1')" :data-clipboard-text="NodeCode">
                        <div class="van-ellipsis">我的邀请码：<span>{{NodeCode}}</span></div> <img src="@/assets/image/_img44.png" alt="" srcset="">
                    </div>
                    <div class="userAddr userAddr2" @click="copy('.userAddr2')" :data-clipboard-text="shareAddress">
                        <div class="van-ellipsis">我的邀请链接：<span>{{shareAddress}}</span></div> <img src="@/assets/image/_img44.png" alt="" srcset="">
                    </div>

                    <div class="row">
                        <div class="cell">
                            <div>
                                <div class="label">我的节点</div>
                                <div class="value">{{ userInfo[2] }}</div>
                            </div>
                        </div>
                        <div class="cell">
                            <div>
                                <div class="label">社区节点</div>
                                <div class="value">{{userInfo[3]}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <van-tabs v-model:active="active2" class="tabsUser" shrink>
                <van-tab title="我的节点">
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('layout.noMore')" @load="onLoad">
                            <div class="nodeList">
                                <ul>
                                    <li v-for="(item,index) in list" :key="index">
                                        <div class="row">
                                            <div class="cell">
                                                <div class="label">节点ID</div>
                                                <div class="value">{{item.id}}</div>
                                            </div>
                                            <div class="cell">
                                                <div class="label">购买时间</div>
                                                <div class="value">{{FormatDate(new Date(item.createdAt*1000), "yyyy-MM-dd hh:mm:ss")}}</div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="cell">
                                                <div class="label">已领取</div>
                                                <div class="value">{{toStringMatch(fromSun(item.withdrawn))}}</div>
                                            </div>
                                            <div class="cell">
                                                <div class="label">待领取VTBK</div>
                                                <div class="value">{{toStringMatch(fromSun(item.token1))}}</div>
                                            </div>
                                            <div class="cell">
                                                <div class="label">待领取TBK</div>
                                                <div class="value">{{toStringMatch(fromSun(item.token2))}}</div>
                                            </div>
                                        </div>
                                        <div class="button">
                                            <van-button round block @click="getReleaseReward(item,index)" :loading="item.loading">
                                                领取
                                            </van-button>
                                            <van-button round block type="primary" @click="showOpen(item.id)">
                                                转让
                                            </van-button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </van-tab>
                <van-tab title="我的邀请">
                    <get-directs-by-page />
                </van-tab>
            </van-tabs>
        </div>
    </div>
    <van-popup v-model:show="open" :duration="0.2" close-icon-position="top-right" closeable round :style="{
            background: `rgba(11, 15, 36, 1)`,
        }">
        <div class="popup">
            <div class="name">转让</div>
            <van-field v-model="address2" placeholder="请输入接收方地址" />
            <van-button round block type="primary" @click="safeTransferFrom" :loading="loading4">
                确定
            </van-button>
        </div>
    </van-popup>
</template>

<style lang="less" scoped>
.popovertext {
    padding: 10px;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
}

.page {
    padding: 100px 30px 40px 30px;
    .van-form {
        padding: 30px 30px;
        background: #0b0f24;
        border-radius: 25px;
        .rowNode {
            display: flex;
            justify-content: space-between;
            .num {
                min-width: 168px;
                padding: 12px 30px;
                text-align: center;
                font-weight: bold;
                font-size: 20px;
                color: #7a44fa;
                border-radius: 20px;
                border: 1px solid #7a44fa;
            }
            .label {
                min-width: 168px;
                padding: 12px 30px;
                text-align: center;
                font-size: 20px;
                color: #ffffff;
                border-radius: 20px;
                text-align: center;
                background: linear-gradient(111deg, #0055ff 0%, #02c2a9 100%);
            }
        }
        .rowRemaining {
            margin-top: 25px;
            display: flex;
            justify-content: space-between;
            .cell {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                width: 48%;
                height: 96px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 8px;
                .label {
                    font-weight: 400;
                    font-size: 16px;
                    color: rgba(255, 255, 255, 0.5);
                }
                .value {
                    margin-top: 20px;
                    font-weight: bold;
                    font-size: 24px;
                    color: #ffffff;
                }
            }
        }
        .price {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 96px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            .label {
                font-weight: 400;
                font-size: 16px;
                color: rgba(255, 255, 255, 0.5);
            }
            .value {
                margin-top: 20px;
                font-weight: bold;
                font-size: 24px;
                color: #7a44fa;
            }
        }
        .name {
            margin-bottom: 15px;
            font-weight: 500;
            font-size: 20px;
            color: #ffffff;
        }
        .rowinput {
            margin-top: 25px;

            .van-stepper {
                position: relative;
                display: flex;
                height: 55px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 8px;
                &:deep(input) {
                    width: auto;
                    flex: 1 0 0;
                    height: 55px;
                    font-size: 22px;
                    color: #fff;
                    background: transparent;
                }
                &:deep(.van-stepper__minus) {
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    margin: 1px 2px;
                    width: 51px;
                    height: 52px;
                    background: rgba(11, 15, 36, 1);
                    border-radius: 8px;
                    &::before,
                    &::after {
                        width: 40%;
                        background-color: #fff;
                    }
                }
                &:deep(.van-stepper__plus) {
                    position: absolute;
                    right: 1px;
                    top: 1px;
                    margin: 1px 2px;
                    width: 51px;
                    height: 52px;
                    background: rgba(11, 15, 36, 1);
                    border-radius: 8px;
                    &::before,
                    &::after {
                        background-color: #fff;
                    }
                    &::before {
                        width: 40%;
                    }
                    &::after {
                        height: 40%;
                    }
                }
            }
            .van-field {
                height: 55px;
                padding: 0 20px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 8px;
                &:deep(input) {
                    height: 55px;
                    font-size: 22px;
                    color: #fff;
                }
            }
        }
        .tabsPay {
            margin-top: 30px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            &:deep(.van-tabs__wrap) {
                height: 55px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 8px;
                overflow: hidden;
                .van-tabs__nav {
                    background: transparent;
                }
                .van-tab {
                    color: #fff;
                    font-size: 20px;
                }
                .van-tabs__line {
                    background: linear-gradient(
                        111deg,
                        rgba(122, 68, 250, 1) 0%,
                        rgba(242, 123, 89, 1) 100%
                    );
                }
            }
            .tabsBlock {
                margin-top: 20px;
                .row {
                    display: flex;
                    justify-content: space-between;
                    .label {
                        font-weight: 400;
                        font-size: 16px;
                        color: rgba(255, 255, 255, 0.5);
                    }
                    .value {
                        margin-top: 15px;
                        font-weight: bold;
                        font-size: 30px;
                        color: #ffffff;
                    }
                }
                .slippage {
                    margin-top: 20px;
                    padding-top: 20px;
                    border-top: 1px solid rgba(255, 255, 255, 0.08);
                    .name {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        div {
                            display: flex;
                            align-items: center;
                            font-size: 16px;
                            span {
                                margin-left: 5px;
                                font-weight: bold;
                                font-size: 16px;
                                // background: linear-gradient(
                                //     20.94952858212592deg,
                                //     #0055ff 0%,
                                //     #02c2a9 100%
                                // );
                                // -webkit-background-clip: text;
                                // -webkit-text-fill-color: transparent;
                                // // text-align: center;
                            }
                            .van-icon {
                                margin-left: 5px;
                                font-size: 16px;
                            }
                        }
                    }
                    ul {
                        display: flex;
                        li {
                            margin: 0 5px;
                            flex: 1;
                            height: 40px;
                            font-weight: 400;
                            font-size: 20px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 8px;
                            border: 1px solid rgba(255, 255, 255, 0.1);
                            &.cur {
                                color: #7a44fa;
                                border: 1px solid #7a44fa;
                            }
                        }
                    }
                }
                .text {
                    margin-top: 15px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #84aeff;
                }
            }
        }
        .van-button {
            margin-top: 20px;
        }
    }
    .award {
        margin-top: 30px;
        .title {
            display: inline-block;
            font-weight: bold;
            font-size: 25px;
            color: #ffffff;
            background: linear-gradient(
                20.94952858212592deg,
                #0055ff 0%,
                #02c2a9 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
        .rowAward {
            margin-top: 15px;
            padding: 15px;
            background: #0b0f24;
            border-radius: 10px;
            .cell {
                padding: 15px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 12px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
                .label {
                    display: flex;
                    align-items: center;
                    font-weight: bold;
                    font-size: 20px;
                    color: #ffffff;
                    img {
                        margin-right: 8px;
                        width: 20px;
                        height: 20px;
                    }
                }
                .van-button {
                    width: auto;
                    height: 40px;
                }
            }
        }
        .rowInvite {
            margin-top: 15px;
            padding: 20px;
            background: #0b0f24;
            border-radius: 10px;
            .userAddr {
                height: 55px;
                padding: 0 20px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 8px;
                color: rgba(255, 255, 255, 0.5);
                display: flex;
                font-size: 16px;
                justify-content: space-between;
                align-items: center;
                &:first-child {
                    margin-bottom: 20px;
                }
                span {
                    color: #fff;
                }
                img {
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                }
            }
            .row {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
                .cell {
                    height: 96px;
                    background: rgba(255, 255, 255, 0.08);
                    flex: 48% 0 0;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    .label {
                        font-weight: 400;
                        font-size: 16px;
                        color: rgba(255, 255, 255, 0.5);
                    }
                    .value {
                        margin-top: 15px;
                        font-weight: bold;
                        font-size: 20px;
                        color: #ffffff;
                    }
                }
            }
        }
    }
    .tabsUser {
        margin-top: 30px;
        &:deep(.van-tabs__wrap) {
            overflow: hidden;
            .van-tabs__nav {
                padding: 0;
                background: transparent;
            }
            .van-tab {
                padding: 0;
                margin-right: 30px;
                font-weight: 500;
                font-size: 25px;
                &.van-tab--active {
                    color: #fff;
                    font-weight: bold;
                }
            }
            .van-tabs__line {
                background: linear-gradient(
                    111deg,
                    rgba(122, 68, 250, 1) 0%,
                    rgba(242, 123, 89, 1) 100%
                );
                bottom: 0;
            }
        }
        .nodeList {
            margin-top: 30px;
            background: #0b0f24;
            border-radius: 10px;
            ul {
                li {
                    margin: 0 20px;
                    padding: 30px 0;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                    .row {
                        display: flex;
                        align-items: center;
                        .cell {
                            flex: 1;
                            &:first-child {
                                flex: 33% 0 0;
                                width: 33%;
                            }
                            .label {
                                font-weight: 400;
                                font-size: 16px;
                                color: rgba(255, 255, 255, 0.5);
                            }
                            .value {
                                margin-top: 15px;
                                margin-bottom: 30px;
                                font-size: 22px;
                                color: #ffffff;
                            }
                        }
                    }
                    .button {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .van-button {
                            max-width: 48%;
                            height: 55px;
                            font-size: 22px;
                            border-radius: 8px;
                            &:first-child {
                                background: transparent;
                                color: #7a44fa;
                                border: 1px solid #7a44fa;
                            }
                        }
                    }
                }
            }
        }
    }
    @media (max-width: 680px) {
        & {
            padding: 60px 15px 40px 15px;
            .van-form {
                padding: 20px 15px;
                background: #0b0f24;
                border-radius: 10px;
                .rowNode {
                    display: flex;
                    justify-content: space-between;
                    .num {
                        min-width: 68px;
                        padding: 8px 19px;
                        font-weight: bold;
                        font-size: 15px;
                        color: #7a44fa;
                        border-radius: 20px;
                        border: 1px solid #7a44fa;
                    }
                    .label {
                        min-width: 68px;
                        padding: 8px 19px;
                        font-size: 15px;
                        color: #ffffff;
                        border-radius: 20px;
                        text-align: center;
                        background: linear-gradient(
                            111deg,
                            #0055ff 0%,
                            #02c2a9 100%
                        );
                    }
                }
                .rowRemaining {
                    margin-top: 16px;
                    display: flex;
                    justify-content: space-between;
                    .cell {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        width: 152px;
                        height: 76px;
                        background: rgba(255, 255, 255, 0.08);
                        border-radius: 8px;
                        .label {
                            font-weight: 400;
                            font-size: 12px;
                            color: rgba(255, 255, 255, 0.5);
                        }
                        .value {
                            margin-top: 11px;
                            font-weight: bold;
                            font-size: 20px;
                            color: #ffffff;
                        }
                    }
                }
                .price {
                    margin-top: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    height: 76px;
                    background: rgba(255, 255, 255, 0.08);
                    border-radius: 8px;
                    .label {
                        font-weight: 400;
                        font-size: 12px;
                        color: rgba(255, 255, 255, 0.5);
                    }
                    .value {
                        margin-top: 11px;
                        font-weight: bold;
                        font-size: 20px;
                        color: #7a44fa;
                    }
                }
                .name {
                    margin-bottom: 10px;
                    font-weight: 500;
                    font-size: 15px;
                    color: #ffffff;
                }
                .rowinput {
                    margin-top: 20px;

                    .van-stepper {
                        position: relative;
                        display: flex;
                        height: 40px;
                        background: rgba(255, 255, 255, 0.08);
                        border-radius: 8px;
                        &:deep(input) {
                            width: auto;
                            flex: 1 0 0;
                            height: 40px;
                            color: #fff;
                            background: transparent;
                        }
                        &:deep(.van-stepper__minus) {
                            margin: 1px 2px;
                            width: 36px;
                            height: 37px;
                            background: rgba(11, 15, 36, 1);
                            border-radius: 8px;
                            &::before,
                            &::after {
                                width: 40%;
                                background-color: #fff;
                            }
                        }
                        &:deep(.van-stepper__plus) {
                            margin: 1px 2px;
                            width: 36px;
                            height: 37px;
                            background: rgba(11, 15, 36, 1);
                            border-radius: 8px;
                            &::before,
                            &::after {
                                background-color: #fff;
                            }
                            &::before {
                                width: 40%;
                            }
                            &::after {
                                height: 40%;
                            }
                        }
                    }
                    .van-field {
                        height: 40px;
                        padding: 0 15px;
                        background: rgba(255, 255, 255, 0.08);
                        border-radius: 8px;
                        &:deep(input) {
                            height: 40px;
                            font-size: 13px;
                            color: #fff;
                        }
                    }
                }
                .tabsPay {
                    margin-top: 20px;
                    padding-top: 20px;
                    border-top: 1px solid rgba(255, 255, 255, 0.08);
                    &:deep(.van-tabs__wrap) {
                        background: rgba(255, 255, 255, 0.08);
                        border-radius: 8px;
                        height: 40px;
                        overflow: hidden;
                        .van-tabs__nav {
                            background: transparent;
                        }
                        .van-tab {
                            color: #fff;
                            font-size: 15px;
                        }
                        .van-tabs__line {
                            background: linear-gradient(
                                111deg,
                                rgba(122, 68, 250, 1) 0%,
                                rgba(242, 123, 89, 1) 100%
                            );
                        }
                    }
                    .tabsBlock {
                        margin-top: 10px;
                        .row {
                            display: flex;
                            justify-content: space-between;
                            .label {
                                font-weight: 400;
                                font-size: 12px;
                                color: rgba(255, 255, 255, 0.5);
                            }
                            .value {
                                margin-top: 15px;
                                font-weight: bold;
                                font-size: 20px;
                                color: #ffffff;
                            }
                        }
                        .slippage {
                            margin-top: 20px;
                            padding-top: 20px;
                            border-top: 1px solid rgba(255, 255, 255, 0.08);
                            ul {
                                display: flex;
                                li {
                                    margin: 0 2px;
                                    flex: 1;
                                    height: 40px;
                                    font-weight: 400;
                                    font-size: 15px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    border-radius: 8px;
                                    border: 1px solid rgba(255, 255, 255, 0.1);
                                    &.cur {
                                        color: #7a44fa;
                                        border: 1px solid #7a44fa;
                                    }
                                }
                            }
                        }
                        .text {
                            margin-top: 12px;
                            font-weight: 400;
                            font-size: 10px;
                            color: #84aeff;
                        }
                    }
                }
                .van-button {
                    margin-top: 20px;
                }
            }
            .award {
                margin-top: 30px;
                .title {
                    display: inline-block;
                    font-weight: bold;
                    font-size: 25px;
                    color: #ffffff;
                    background: linear-gradient(
                        20.94952858212592deg,
                        #0055ff 0%,
                        #02c2a9 100%
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    text-align: center;
                }
                .rowAward {
                    margin-top: 15px;
                    padding: 15px;
                    background: #0b0f24;
                    border-radius: 10px;
                    .cell {
                        padding: 15px;
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 12px;
                        background: rgba(255, 255, 255, 0.08);
                        border-radius: 10px;
                        &:last-child {
                            margin-bottom: 0;
                        }
                        .label {
                            display: flex;
                            align-items: center;
                            font-weight: bold;
                            font-size: 20px;
                            color: #ffffff;
                            img {
                                margin-right: 8px;
                                width: 20px;
                                height: 20px;
                            }
                        }
                        .van-button {
                            width: auto;
                            height: 30px;
                        }
                    }
                }
                .rowInvite {
                    margin-top: 15px;
                    padding: 15px;
                    background: #0b0f24;
                    border-radius: 10px;
                    .userAddr {
                        height: 45px;
                        padding: 0 15px;
                        background: rgba(255, 255, 255, 0.08);
                        border-radius: 8px;
                        font-size: 14px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        &:first-child {
                            margin-bottom: 12px;
                        }
                        img {
                            width: 12px;
                            height: 12px;
                        }
                    }
                    .row {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 12px;
                        .cell {
                            height: 76px;
                            background: rgba(255, 255, 255, 0.08);
                            flex: 48% 0 0;
                            border-radius: 8px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            text-align: center;
                            .label {
                                font-weight: 400;
                                font-size: 12px;
                                color: rgba(255, 255, 255, 0.5);
                            }
                            .value {
                                margin-top: 11px;
                                font-weight: bold;
                                font-size: 20px;
                                color: #ffffff;
                            }
                        }
                    }
                }
            }
            .tabsUser {
                margin-top: 30px;
                &:deep(.van-tabs__wrap) {
                    overflow: hidden;
                    .van-tabs__nav {
                        padding: 0;
                        background: transparent;
                    }
                    .van-tab {
                        padding: 0;
                        margin-right: 30px;
                        font-weight: 500;
                        font-size: 25px;
                        &.van-tab--active {
                            color: #fff;
                            font-weight: bold;
                        }
                    }
                    .van-tabs__line {
                        background: linear-gradient(
                            111deg,
                            rgba(122, 68, 250, 1) 0%,
                            rgba(242, 123, 89, 1) 100%
                        );
                        bottom: 0;
                    }
                }
                .nodeList {
                    margin-top: 20px;
                    background: #0b0f24;
                    border-radius: 10px;
                    ul {
                        li {
                            margin: 0 15px;
                            padding: 20px 0;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                            .row {
                                display: flex;
                                align-items: center;
                                .cell {
                                    flex: 1;
                                    &:first-child {
                                        flex: 33% 0 0;
                                        width: 33%;
                                    }
                                    .label {
                                        font-weight: 400;
                                        font-size: 12px;
                                        color: rgba(255, 255, 255, 0.5);
                                    }
                                    .value {
                                        margin-top: 11px;
                                        margin-bottom: 20px;
                                        font-size: 20px;
                                        color: #ffffff;
                                    }
                                }
                            }
                            .button {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                .van-button {
                                    max-width: 48%;
                                    height: 30px;
                                    font-size: 15px;
                                    border-radius: 8px;
                                    &:first-child {
                                        background: transparent;
                                        color: #7a44fa;
                                        border: 1px solid #7a44fa;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.popup {
    width: 545px;
    padding: 40px 30px;
    box-sizing: border-box;
    background: rgba(3, 0, 20, 1);
    border-radius: 15px;
    .name {
        font-weight: 500;
        font-size: 26px;
        color: #ffffff;
    }
    .van-field {
        margin-top: 30px;
        height: 55px;
        padding: 0 15px;
        background: rgba(11, 15, 36, 1);
        border-radius: 8px;
        &:deep(input) {
            height: 55px;
            font-size: 20px;
            color: #fff;
        }
        &::after {
            display: none;
        }
    }
    .van-button {
        margin-top: 30px;
    }
    @media (max-width: 680px) {
        & {
            width: 345px;
            padding: 25px 15px;
            box-sizing: border-box;
            background: rgba(3, 0, 20, 1);
            border-radius: 15px;
            .name {
                font-weight: 500;
                font-size: 18px;
                color: #ffffff;
            }
            .van-field {
                margin-top: 20px;
                height: 40px;
                padding: 0 15px;
                background: rgba(11, 15, 36, 1);
                border-radius: 8px;
                &:deep(input) {
                    height: 40px;
                    font-size: 13px;
                    color: #fff;
                }
                &::after {
                    display: none;
                }
            }
            .van-button {
                margin-top: 20px;
            }
        }
    }
}
</style>
